<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Component One CollectionView for Spinners</title>
    <link href="../contents/bootstrap.min.css" rel="stylesheet"/>
    <link href="../contents/wijmo.min.2022.04.22.uat.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="../Javascripts/wijmo.min.2022.04.22.uat.js"></script>
    
    <style type="text/css">
        .wj-flexgrid {
            max-height: 250px;
        }

        .wj-radialgauge.spinner {
            margin: auto auto;
            padding-bottom: 32px;
            max-width: 200px;
        }

        .spinner img, .spinner.wj-gauge {
            display: block;
            margin: auto;
            margin-top: 20px;
        }

        .btn {
            margin-bottom: 6px;
        }

        body {
            margin-bottom: 24pt;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <h3>GIF Spinner</h3>

        <button id="btn-load-gif" class="btn btn-primary">Load GIF using GIF Spinner</button>

        <div id="gifWrapper">
            <div id="grid" style="display: none"></div>
            <div style="display: none">
                <div id="theSpinnerGif" class="spinner">
                    <img src="../images/Rounded%20blocks.gif"/>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">

    function getData(callback, delay){
        let countries = ['US', 'UK', 'China', 'Germany', 'India'], data = [];
        //
        for (let i = 0; i < 1000; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                sales: Math.random() * 1000,
                downloads: Math.random() * 10000,
            });
        }
        //
        setTimeout(() => callback(data), delay);
    }

    document.readyState === "complete"?init():window.onload = init;
    function init(){
        let theGridGif = new wijmo.grid.FlexGrid("#grid");
        let theSpinnerGif = document.querySelector("#theSpinnerGif");
        const gifWrapper = document.querySelector("#gifWrapper");

        document.querySelector("#btn-load-gif").addEventListener("click",()=>{
            theGridGif.isDisabled = true;
            theGridGif.itemsSource = null;

            wijmo.toggleClass(theGridGif.hostElement, 'hidden');
            gifWrapper.appendChild(theSpinnerGif);

            getData((data) => {
                theGridGif.itemsSource = data;
                theGridGif.isDisabled = false;
                document.querySelector("#grid").style.display='block';
                wijmo.removeChild(theSpinnerGif);
                wijmo.toggleClass(theGridGif.hostElement, 'hidden');
            }, 3000);
        });
    }
</script>
</body>
</html>